<template>
	<view>
		<view class="kaihutalis">
			<view style="width: 30%; height: 100%; float: left; background:#08377D ;"></view>
			<view style="position: absolute; text-align: center;left: 0; top: 0; color: #fff; width: 100%;">开户进度30%
			</view>
		</view>
		<view class="btn_yjz">
			<view class="yjzsc">使用永居证开户，请点击上传</view>
			<view class="btsc">上传永居证</view>
		</view>
		<view class="listtab">
			<view>
				<view style="float: left; width: 50%; font-size: 32rpx; font-weight: 600;">基本信息</view>
				<view style="float: left; width: 50%; font-size: 24rpx; color: #FEA330;">请确保信息真实、准确、有效</view>
			</view>
			<view class="listtab_name">
				<view class="list">
					<view class="listurl">
						<view class="left">职业*</view>
						<view class="right">党政机关负责人及管理人员<uni-icons type="right" size="18" color="#999999"></uni-icons>
						</view>
					</view>
					<view class="listurl">
						<view class="left">工作单位</view>
						<view class="right"><input style="width: 90%; float: left; height: 100%; font-size: 24rpx;"
								placeholder="须与所选的职业相匹配" /><uni-icons type="right" size="18"
								color="#999999"></uni-icons></view>
					</view>
					<view class="listurl">
						<view class="left">学历*</view>
						<view class="right"><input style="width: 90%; float: left; height: 100%; font-size: 24rpx;"
								placeholder="请选择(必填)" /><uni-icons type="right" size="18" color="#999999"></uni-icons>
						</view>
					</view>
					<view class="listurl">
						<view class="left">自然人身份类别*</view>
						<view class="right">普通自然人<uni-icons type="right" size="18" color="#999999"></uni-icons></view>
					</view>
					<view class="listurl">
						<view class="left">年收入*</view>
						<view class="right"><input style="width: 80%; float: left; height: 100%; font-size: 24rpx;"
								placeholder="不低于所在城市最低收入" /><text style="margin-left: 10rpx;">万元</text></view>
					</view>
					<view class="listurla">
						<view class="left">国籍</view>
						<view class="right">中国</view>
					</view>
				</view>
			</view>
			<view style="margin-top:80rpx; float: left; width: 100%; height: 30rpx;">
				<view style="float: left; width: 60%; font-size: 32rpx; font-weight: 600;">联系地址</view>
				<view style="float: left; width: 40%; font-size: 24rpx; color: #FEA330;">与身份证一致
					<switch style="transform:scale(0.7)" />
				</view>
			</view>
			<view class="listtab_namea">
				<view class="list">
					<view class="listurl">
						<view class="left">常住地址*</view>
						<view class="right">请选择(必填)<uni-icons type="right" size="18" color="#999999"></uni-icons></view>
					</view>
					<view class="listurlb">
						<view class="left">详细地址*</view>
						<view class="right"><input style="width: 90%; float: left; height: 100%; font-size: 24rpx;"
								placeholder="精确到街道、门牌号、楼层和房 间号等信息(必填)" /><uni-icons type="right" size="18"
								color="#999999"></uni-icons></view>
					</view>

				</view>
			</view>
			<view class="container">
				<form @submit="onSubmit">
					<!-- 其他登录表单项 -->
					<view class="agreement">
						<checkbox-group @change="toggleAgree">
											<label>
												<checkbox value="0"  /><text>我们将采集您的国籍、身份信息，职业信息，收入情况，用 于业务办理及身份信息核对</text>
											</label>
											
										</checkbox-group>
						
					</view>
					<button v-if="isAgree == ''" formType="submit"  class="xybta" style="background: #CCDBF0;">下一步</button>
					<button  v-else  formType="submit"  class="xybta" @click="fanhui()" >下一步</button>
				</form>
			</view>
		</view>
		
		
	
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAgree:"" // 默认未勾选
			};
		},
		methods: {
			fanhui(){
				uni.navigateTo({
					url:'./pinggu'
				})
			},
			toggleAgree(event) {
				
				this.isAgree = event.detail.value;
			},
			onSubmit(event) {
				event.preventDefault();
				if (!this.isAgree) {
					uni.showToast({
						title: '请先同意用户协议与隐私政策',
						icon: 'none'
					});
					return;
				}
				// 登录逻辑
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
			}
		}
	};
</script>

<style>
	.kaihutalis {
		width: 100%;
		height: 40rpx;
		float: left;
		background: #D6E1F1;
		position: relative;
	}

	.btn_yjz {
		width: 100%;
		height: 76rpx;
		float: left;
	}

	.yjzsc {
		width: 40%;
		height: 76rpx;
		float: left;
		margin-left: 5%;
		line-height: 76rpx;
		font-size: 24rpx;
		color: #262626;
	}

	.btsc {
		width: 166rpx;
		height: 48rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1px solid #08377D;
		float: right;
		margin-right: 33rpx;
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #08377D;
		text-align: center;
		line-height: 48rpx;
	}


	.xybta {
		width: 100%;
		height: 92rpx;
		float: left;
		background: #08377D;
		color: #fff;
		text-align: center;
		line-height: 92rpx;
		margin-top: 72rpx;
		font-weight: bold;
		font-size: 32rpx;
		border-radius: 10rpx;
	}

	.listtab {
		width: 90%;
		height: 100%;
		float: left;
		margin-left: 5%;
		margin-top: 20rpx;
	}

	.listtab_name {
		width: 684rpx;
		height: 544rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(8, 55, 125, 0.1);
		border-radius: 12rpx;
		float: left;
		margin-top: 30rpx;
	}

	.listtab_namea {
		width: 684rpx;
		height: 262rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(8, 55, 125, 0.1);
		border-radius: 12rpx;
		float: left;
		margin-top: 80rpx;
	}
</style>
<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F6F4F9;
	}

	.container {
		float: left;
		width: 100%;
		margin-top: 100rpx;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin-bottom: 20px;

		checkbox {
			margin-right: 10px;
		}

		text {
			font-size: 14px;
			color: #666;
		}
	}

	.wrapper {
		height: 100%;
		box-sizing: border-box;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		text-align: center;
		margin: 33rpx auto;
		position: relative;
		z-index: 1;

		.avatar-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.avatar-icon {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 2;
			background: url('../../static/user/mysetting/edit-icon.png');
			background-position: center center;
			background-size: 100% 100%;
		}
	}

	.lista {
		width: 100%;
		padding: 0 33rpx;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 12rpx;

		.listurl {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 93rpx;

			.left {
				font-weight: bold;
				font-size: 28rpx;
				color: #262626;
			}

			.right {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}

	}

	.list {
		width: 100%;
		padding: 0 33rpx;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 12rpx;

		.listurl {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 93rpx;
			border-bottom: 1rpx solid #E5E5E5;

			.left {
				font-weight: bold;
				font-size: 28rpx;
				color: #262626;
			}

			.right {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.listurla {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 93rpx;

			.left {
				font-weight: bold;
				font-size: 28rpx;
				color: #262626;
			}

			.right {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.listurlb {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 170rpx;

			.left {
				font-weight: bold;
				font-size: 28rpx;
				color: #262626;
			}

			.right {
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>